<template>
  <div id="overview-global-root-div">
    <div class="content-wrapper">
      <div class="d-flex justify-center align-center title">
        <h1>世界 · 疫情地图</h1>
      </div>
      <div class="d-flex justify-center align-center map">
        <WorldMap :globalInfo="propList"></WorldMap>
      </div>
      <div class="d-flex justify-center align-center title">
        <h1>世界 · 数据总览</h1>
      </div>
      <CardGroup :vaccinated="propVaccinated"></CardGroup>
      <div class="list pa-6">
        <div class="d-flex flex-row justify-space-between">
          <div class="title-div">国家列表</div>
          <div class="text-field-div">
            <v-text-field v-model="search" append-icon="mdi-magnify" label="搜索国家" single-line hide-details></v-text-field>
          </div>
        </div>
        <div class="v-data-table-wrapper">
          <v-data-table :headers="headers" :items="countryData" :sort-desc="[false, true]" :hide-default-footer="true"
                        :search="search" :items-per-page="1000" :loading="listLoading">
            <template v-slot:no-data>
              <h1>暂无数据</h1>
            </template>
            <template v-slot:no-results>
              <h1>无结果，请检查拼写</h1>
            </template>
            <template v-slot:loading>
              <h1>加载中...</h1>
            </template>
          </v-data-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CardGroup from "../../../components/views/public/Overview/GlobalOverview/CardGroup";
import WorldMap from "../../../components/views/public/Overview/GlobalOverview/WorldMap";
export default {
  name: 'GlobalView',
  components: {WorldMap, CardGroup},
  data() {
    return {
      propVaccinated: '正在加载...',
      propList: [],
      worldDataJson: {},
      //for the data list
      headers: [
        {
          text: '国家代码',
          align: 'start',
          sortable: true,
          value: 'country_code',
        },
        { text: '国家名', value: 'country' },
        { text: '确诊', value: 'confirmed' },
        { text: '治愈', value: 'recovered' },
        { text: '死亡', value: 'deaths' },
        { text: '接种', value: 'vaccinated' },
      ],
      countryData: [],
      search: '',
      listLoading: true,
    }
  },
  mounted() {
    let that = this;
    this.$api.overview.globalVaccine().then((res) => {
      if(res.success) {
        that.worldDataJson = res.data;
        let list = [];
        for(let i = 0, l = that.worldDataJson.regions.world.list.length; i < l; i++) {
          if(that.worldDataJson.regions.world.list[i].confirmed < 0) that.worldDataJson.regions.world.list[i].confirmed = '暂无数据';
          if(that.worldDataJson.regions.world.list[i].deaths < 0) that.worldDataJson.regions.world.list[i].deaths = '暂无数据';
          if(that.worldDataJson.regions.world.list[i].recovered < 0) that.worldDataJson.regions.world.list[i].recovered = '暂无数据';
          if(that.worldDataJson.regions.world.list[i].vaccinated < 0) that.worldDataJson.regions.world.list[i].vaccinated = '暂无数据';
          //TODO 处理台湾、香港和 Summer Olympics 2020
          if(that.worldDataJson.regions.world.list[i].country === 'Summer Olympics 2020') continue;
          if(that.worldDataJson.regions.world.list[i].country === 'Taiwan') continue;
          if(that.worldDataJson.regions.world.list[i].country === 'Hong Kong') continue;
          list.push(that.worldDataJson.regions.world.list[i]);
        }
        that.propVaccinated = that.$formatNumber(res.data.regions.world.totals.vaccinated + '');
        that.propList = that.worldDataJson.regions.world.list;
        this.countryData = list;
      }
      this.listLoading = false;
    });
  },
}
</script>

<style scoped>
#overview-global-root-div {
  width: 100%;
}
#overview-global-root-div .content-wrapper{
  width: calc(100% - 256px - 32px);
  margin-top: 32px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 16px;
}
.content-wrapper .title{
  width: 100%;
  height: 120px;
  margin-top: 130px;
}
.content-wrapper .title h1{
  font-size: 48px;
  font-weight: normal;
}
.content-wrapper .map{
  width: 100%;
  height: 700px;
  border: 1px solid silver;
  border-radius: 6px;
}

.content-wrapper .list{
  width: 100%;
  height: 580px;
  margin-top: 32px;
  border: 1px solid silver;
  border-radius: 6px;
}

.content-wrapper .list .title-div{
  font-size: 32px;
}
.content-wrapper .list .text-field-div{
  width: 480px;
}
.content-wrapper .list .v-data-table-wrapper{
  overflow: auto;
  height: 500px;
}
/deep/ .content-wrapper .list .v-data-table-wrapper span{
  font-size: 18px;
}
/deep/ .content-wrapper .list .v-data-table-wrapper td{
  font-size: 18px;
}
</style>